<!DOCTYPE html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin Panel</title>

    <link href='http://fonts.googleapis.com/css?family=Roboto:400,300,500,700,900' rel='stylesheet' type='text/css' />
    <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css' />

    <!-- Styles -->
    <link rel="stylesheet" href="font-awesome-4.2.0/css/font-awesome.css" type="text/css" />
    <!-- Font Awesome -->
    <link rel="stylesheet" type="text/css" media="all" href="css/daterangepicker-bs3.css" />
    <!-- Date Range Picker -->
    <link rel="stylesheet" href="css/bootstrap.css" type="text/css" />
    <!-- Bootstrap -->
    <link rel="stylesheet" href="css/rickshaw.css" type="text/css" />
    <!-- Rickshaw -->
    <link rel="stylesheet" href="css/jquery-jvectormap.css" type="text/css" />
    <!-- Vector Map -->
    <link rel="stylesheet" href="css/style.css" type="text/css" />
    <!-- Style -->
    <link rel="stylesheet" href="css/responsive.css" type="text/css" />
    <!-- Responsive -->

</head>

<body>

    <div class="main">
        <div id="live-chat">
            <div class="clearfix gray chat-header">
                <a href="#" class="chat-close">-</a>
                <h4>Labrina Scholar</h4>
                <span class="chat-message-counter">3</span>
            </div>
            <div class="chat" style="display:none;">
                <div class="chat-history">
                    <div class="chat-message">
                        <img src="images/resource/sender1.jpg" alt="" width="32" height="32" />
                        <div class="chat-message-content">
                            <span class="chat-time">11:54</span>
                            <h5>John Doe</h5>
                            <p>Lorem ipsum dolor. Error, explicabo quasi ratione odio dolorum harum.</p>
                        </div>
                        <!-- end chat-message-content -->
                    </div>
                    <!-- end chat-message -->
                    <div class="chat-message">
                        <img src="images/resource/sender2.jpg" alt="" width="32" height="32" />
                        <div class="chat-message-content">
                            <span class="chat-time">12:43</span>
                            <h5>Marco Biedermann</h5>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                        </div>
                        <!-- end chat-message-content -->
                    </div>
                    <!-- end chat-message -->
                    <div class="chat-message">
                        <img src="images/resource/sender1.jpg" alt="" width="32" height="32" />
                        <div class="chat-message-content">
                            <span class="chat-time">12:23</span>
                            <h5>John Doe</h5>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
                        </div>
                        <!-- end chat-message-content -->
                    </div>
                    <!-- end chat-message -->
                </div>
                <!-- end chat-history -->
                <p class="chat-feedback">Your partner is typing… <img src="images/typing-loading.gif" alt="" />
                </p>
                <form action="#" method="post">
                    <fieldset>
                        <input type="text" placeholder="Type your message…" autofocus>
                        <input type="hidden">
                    </fieldset>
                </form>
            </div>
            <!-- end chat -->
        </div>
        <!-- end live-chat -->

        <header class="header">
            <div class="logo">
                <a href="dashboard.html" title=""><img src="images/logo2.png" alt="" />
                </a>
                <a title="" class="toggle-menu"><i class="fa fa-bars"></i></a>
            </div>
            <form class="search">
                <input type="text" placeholder="Search..." />
                <button type="button"><i class="fa fa-search"></i>
                </button>
            </form>
            <div class="custom-dropdowns">
                <div class="message-list dropdown">
                    <a title=""><span class="blue">4</span><i class="fa fa-envelope-o"></i></a>
                    <div class="message drop-list">
                        <span>You have 4 New Messages</span>
                        <ul>
                            <li>
                                <a title=""><span><img src="images/resource/sender1.jpg" alt="" /></span><i>Labrina Scholer</i>Hi! How are you?...<h6>2 min ago..</h6><p class="status blue">New</p></a>
                            </li>
                            <li>
                                <a href="#" title=""><span><img src="images/resource/sender2.jpg" alt="" /></span><i>Jonathan</i>Hi! How are you?...<h6>2 min ago..</h6><p class="status red">Unsent</p></a>
                            </li>
                            <li>
                                <a href="#" title=""><span><img src="images/resource/sender3.jpg" alt="" /></span><i>Barada knol</i>Hi! How are you?...<h6>2 min ago..</h6><p class="status green">Reply</p></a>
                            </li>
                            <li>
                                <a href="#" title=""><span><img src="images/resource/sender4.jpg" alt="" /></span><i>Samtha Gee</i>Hi! How are you?...<h6>2 min ago..</h6><p class="status">New</p></a>
                            </li>
                        </ul>
                        <a href="inbox.html" title="">See All Messages</a>
                    </div>
                </div>
                <!-- Message List -->
                <div class="notification-list dropdown">
                    <a title=""><span class="green">3</span><i class="fa fa-bell-o"></i></a>
                    <div class="notification drop-list">
                        <span>You have 3 New Notifications</span>
                        <ul>
                            <li>
                                <a href="#" title=""><span><i class="fa fa-bug red"></i></span>Server 3 is Over Loader Please Check... <h6>2 min ago..</h6></a>
                            </li>
                            <li>
                                <a href="#" title=""><span><img src="images/resource/sender2.jpg" alt="" /></span><i>MD Daisal</i>New User Registered<h6>4 min ago..</h6><p class="status red">Urgent</p></a>
                            </li>
                            <li>
                                <a href="#" title=""><span><i class="fa fa-bullhorn green"></i></span>Envato Has change the policies<h6>7 min ago..</h6></a>
                            </li>
                        </ul>
                        <a href="#" title="">See All Notifications</a>
                    </div>
                </div>
                <!-- Notification List -->
                <div class="activity-list dropdown">
                    <a title=""><span class="red">4</span><i class="fa fa-clock-o"></i></a>
                    <div class="activity drop-list">
                        <span>Recent Activity</span>
                        <ul>
                            <li>
                                <a href="#" title=""><span><img src="images/resource/sender2.jpg" alt="" /></span><i>Jona Than</i>Uploading new files<h6>2 min ago..</h6><p class="status green">Online</p></a>
                                <div class="progress">
                                    <div style="width: 60%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="60" role="progressbar" class="progress-bar blue">
                                        60%
                                    </div>
                                </div>
                            </li>
                            <li>
                                <a href="#" title=""><span><img src="images/resource/sender1.jpg" alt="" /></span><i>Bela Nisaa</i>Downloading new Documents<h6>2 min ago..</h6></a>
                                <div class="progress">
                                    <div style="width: 34%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="34" role="progressbar" class="progress-bar red">
                                        34%
                                    </div>
                                </div>
                            </li>
                        </ul>
                        <a href="#" title="">See All Activity</a>
                    </div>
                </div>
                <!-- Activity List -->
            </div>
            <a title="" class="slide-panel-btn"><i class="fa fa-gear fa-spin"></i></a>
            <div class="dropdown profile">
                <a title="">
                    <img src="images/resource/me.jpg" alt="" />Labrina Scholer<i class="caret"></i>
                </a>
                <div class="profile drop-list">
                    <ul>
                        <li><a href="#" title=""><i class="fa fa-edit"></i> New post</a>
                        </li>
                        <li><a href="#" title=""><i class="fa fa-wrench"></i> Setting</a>
                        </li>
                        <li><a href="profile.html" title=""><i class="fa fa-user"></i> Profile</a>
                        </li>
                        <li><a href="faq.html" title=""><i class="fa fa-info"></i> Help</a>
                        </li>
                    </ul>
                </div>
                <!-- Profile DropDown -->

            </div>
        </header>
        <!-- Header -->
        <div class="page-container menu-left">
            <aside class="sidebar">
                <div class="profile-stats">
                    <div class="mini-profile">
                        <span><img src="images/resource/me.jpg" alt="" /></span>
                        <h3>Labrina Scholer</h3>
                        <h6 class="status online"><i></i> Online</h6>
                        <a href="index.html" title="Logout" class="logout red" data-toggle="tooltip" data-placement="right"><i class="fa fa-power-off"></i></a>
                    </div>
                    <div class="quick-stats">
                        <h5>Today Report</h5>
                        <ul>
                            <li><span>456<i>Sales</i></span>
                            </li>
                            <li><span>2,345<i>Order</i></span>
                            </li>
                            <li><span>$120<i>Revenue</i></span>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="menu-sec">
                    <div id="menu-toogle" class="menus">
                        <div class="single-menu">
                            <h2><a title=""><i class="fa fa-home"></i><span>Dashboards</span></a><i class="blue">3</i></h2>
                            <div class="sub-menu">
                                <ul>
                                    <li><a href="dashboard.html" title="">Dashboard 1</a>
                                    </li>
                                    <li><a href="dashboard2.html" title="">Dashboard 2</a>
                                    </li>
                                    <li><a href="dashboard3.html" title="">Dashboard 3</a>
                                    </li>
                                    <li><a href="http://forest.themenum.com/azan/landing1/index.html" title="">Landing Page 1</a><span class="badge red">New</span>
                                    </li>
                                    <li><a href="http://forest.themenum.com/azan/landing1/index2.html" title="">Landing Page 2</a><span class="badge red">New</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="single-menu">
                            <h2><a title=""><i class="fa fa-desktop"></i><span>Layouts</span></a></h2>
                            <div class="sub-menu">
                                <ul>
                                    <li><a href="blank.html" title="">Blank</a>
                                    </li>
                                    <li><a href="collapse-sidebar-left.html" title="">Collapse Sidebar Left</a>
                                    </li>
                                    <li><a href="collapse-sidebar-right.html" title="">Collapse Sidebar Right</a>
                                    </li>
                                    <li><a href="menu-horizontal.html" title="">Menu Horizontal</a>
                                    </li>
                                    <li><a href="panel-left-menu-right.html" title="">Panel Left Menu Right</a>
                                    </li>
                                    <li><a href="panel-right-menu-left.html" title="">Panel Right Menu Left</a>
                                    </li>
                                    <li><a href="sidebar-left.html" title="">Sidebar left</a>
                                    </li>
                                    <li><a href="sidebar-right.html" title="">Sidebar Right</a>
                                    </li>

                                </ul>
                            </div>
                        </div>
                        <div class="single-menu">
                            <h2><a href="widgets.html" title=""><i class="fa fa-flask"></i><span>Widgets</span></a></h2>
                        </div>
                        <div class="single-menu">
                            <h2><a title=""><i class="fa fa-heart-o"></i><span>UI Elements</span></a></h2>
                            <div class="sub-menu">
                                <ul>
                                    <li><a href="inbox.html" title="">Mail Box</a>
                                    </li>
                                    <li><a href="profile.html" title="">Profile</a>
                                    </li>
                                    <li><a href="buttons.html" title="">Buttons</a>
                                    </li>
                                    <li><a href="timeline.html" title="">Timeline</a>
                                    </li>
                                    <li><a href="typography.html" title="">Typography</a>
                                    </li>
                                    <li><a href="calendars.html" title="">Calendars</a>
                                    </li>
                                    <li><a href="upload-crop.html" title="">Upload Crop</a>
                                    </li>
                                    <li><a href="tour.html" title="">Page Tour</a>
                                    </li>
                                    <li><a href="tree-list.html" title="">Tree List</a>
                                    </li>
                                    <li><a href="collapse.html" title="">Collapse</a>
                                    </li>
                                    <li><a href="editor.html" title="">Editor</a>
                                    </li>
                                    <li><a href="form.html" title="">Forms</a>
                                    </li>
                                    <li><a href="gallery-dynamic.html" title="">Gallery Dynamic</a>
                                    </li>
                                    <li><a href="gallery-static.html" title="">Gallery Static</a>
                                    </li>
                                    <li><a href="grids.html" title="">Grids</a>
                                    </li>
                                    <li><a href="icons.html" title="">Icons</a>
                                    </li>
                                    <li><a href="notifications.html" title="">Notification</a>
                                    </li>
                                    <li><a href="price-table.html" title="">Price Tables</a>
                                    </li>
                                    <li><a href="range-slider.html" title="">Range Slider</a>
                                    </li>
                                    <li><a href="slider.html" title="">Slider</a>
                                    </li>
                                    <li><a href="sortable.html" title="">Sortable</a>
                                    </li>
                                    <li><a href="tables.html" title="">Tables</a>
                                    </li>
                                    <li><a href="tasks.html" title="">Tasks</a>
                                    </li>
                                    <li><a href="tasks-widget.html" title="">Task Widgets</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="single-menu">
                            <h2><a href="form.html" title=""><i class="fa fa-paperclip"></i><span>Form Stuffs</span></a></h2>
                        </div>
                        <div class="single-menu">
                            <h2><a href="charts.html" title=""><i class="fa fa-bar-chart"></i><span>Charts</span></a></h2>
                        </div>
                        <div class="single-menu">
                            <h2><a title=""><i class="fa fa-paper-plane-o"></i><span>Pages</span></a></h2>
                            <div class="sub-menu">
                                <ul>
                                    <li><a href="404.html" title="">404 Error</a>
                                    </li>
                                    <li><a href="blank.html" title="">Blank</a>
                                    </li>
                                    <li><a href="contact.html" title="">Contact</a>
                                    </li>
                                    <li><a href="google-map.html" title="">Google Map</a>
                                    </li>
                                    <li><a href="vector-map.html" title="">Vector Map</a>
                                    </li>
                                    <li><a href="invoice.html" title="">Invoice</a>
                                    </li>
                                    <li><a href="pattern-login.html" title="">Pattern Login</a>
                                    </li>
                                    <li><a href="index.html" title="">Simple Login</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <p>2014 Copyright Azan by <a href="http://themeforest.net/user/themenum/portfolio?ref=themenum" title="">Themenum</a>
                    </p>
                </div>
                <!-- Menu Sec -->
            </aside>
            <!-- Aside Sidebar -->
            <div class="content-sec">
                <div class="breadcrumbs">
                    <ul>
                        <li><a href="dashboard.html" title=""><i class="fa fa-home"></i></a>/</li>
                        <li><a title="">Dashboard 3</a>
                        </li>
                    </ul>
                </div>
                <!-- breadcrumbs -->
                <div class="container">
                    <div class="title-date-range">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="main-title">
                                    <h1>Dashboard 3</h1>
                                    <h5>Welcome back, Labrina</h5><span><i class="fa fa-map-marker"></i>New York City</span>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div id="reportrange" class="date-range">
                                    <i class="fa fa-calendar-o"></i>
                                    <span></span> <b class="caret"></b>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- title Date Range -->
                    <div class="stats-counter-sec">
                        <div class="top-margin">
                            <div class="row">
                                <div class="col-md-3">
                                    <div class="stats-counter">
                                        <h3>New Visits</h3>
                                        <span>21,069</span>
                                        <i class="fa fa-clock-o green"></i>
                                        <h6>Total Visits : 9,34,001</h6>
                                    </div>
                                    <!-- Stats Counter -->
                                </div>
                                <div class="col-md-3">
                                    <div class="stats-counter">
                                        <h3>New Signups</h3>
                                        <span>1,346</span>
                                        <i class="fa fa-user red"></i>
                                        <h6>Total Users : 22,344</h6>
                                    </div>
                                    <!-- Stats Counter -->
                                </div>
                                <div class="col-md-3">
                                    <div class="stats-counter">
                                        <div class="ribbon-wrapper">
                                            <div class="ribbon-design blue">Today</div>
                                        </div>
                                        <h3>Todays Earning</h3>
                                        <span>2,345</span>
                                        <i class="fa fa-usd blue"></i>
                                        <h6>Total Earning : $345,00</h6>
                                    </div>
                                    <!-- Stats Counter -->
                                </div>
                                <div class="col-md-3">
                                    <div class="stats-counter">
                                        <h3>Real Visitors</h3>
                                        <span id="random"></span>
                                        <i class="fa  fa-area-chart gray"></i>
                                        <h6>Total Visitors : 235,670</h6>
                                    </div>
                                    <!-- Stats Counter -->
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Stats Counter Sec-->
                    <div class="row">
                        <div class="masonary-grids">
                            <div class="col-md-12">
                                <div class="widget-area">
                                    <h2 class="widget-title"><strong>Website</strong> Stats</h2>
                                    <ul class="panel-function">
                                        <li class="dropdown">
                                            <a role="button" data-toggle="dropdown" href="#"> <b class="caret"></b>
                                            </a>
                                            <ul class="dropdown-menu" role="menu">
                                                <li role="presentation"><a title="" class="hide-btn"><i class="fa fa-minus"></i></a>
                                                </li>
                                                <li role="presentation"><a title="" class="close-sec"><i class="fa fa-close"></i></a>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                    <!-- Panel Function -->
                                    <div class="row">
                                        <div class="col-md-7">
                                            <div class="widget">
                                                <canvas id="canvas" class="website-stats"></canvas>
                                                <ul class="statistics-report">
                                                    <li>
                                                        <h3>FRI <i>August/Sep/2013</i></h3>
                                                    </li>
                                                    <li>
                                                        <h6><i class="fa fa-laptop"></i> Desktop <span>7,234</span></h6>
                                                    </li>
                                                    <li>
                                                        <h6><i class="fa fa-mobile"></i> Mobile <span>12,092</span></h6>
                                                    </li>
                                                </ul>
                                            </div>
                                            <!-- Widget -->
                                        </div>
                                        <div class="col-md-5">
                                            <div class="dounut-chart">
                                                <svg id="svg"></svg>
                                                <div class="status-progress-sec">
                                                    <div class="row">
                                                        <div class="col-md-6">
                                                            <div class="status-progress">
                                                                <span>Data Bases (23/100)</span>
                                                                <div class="progress">
                                                                    <div style="width: 90%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="90" role="progressbar" class="progress-bar gray">
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <!-- Server Status progress -->
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="status-progress">
                                                                <span>Memory Usage 50%</span>
                                                                <div class="progress">
                                                                    <div style="width: 60%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="60" role="progressbar" class="progress-bar gray">
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <!-- Server Status progress -->
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="status-progress">
                                                                <span>Email Accounts (56/100)</span>
                                                                <div class="progress">
                                                                    <div style="width: 25%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="25" role="progressbar" class="progress-bar gray">
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <!-- Server Status progress -->
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="status-progress">
                                                                <span>CPU Usage (34.05-23 cpus)</span>
                                                                <div class="progress">
                                                                    <div style="width: 95%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="95" role="progressbar" class="progress-bar gray">
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <!-- Server Status progress -->
                                                        </div>
                                                    </div>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- Widget Area -->
                            </div>

                            <div class="col-md-5">
                                <div class="widget-area no-padding">
                                    <div class="ribbon-wrapper">
                                        <div class="ribbon-design blue">Twitter</div>
                                    </div>
                                    <div class="tweet-widget">
                                        <img src="images/resource/tweet-bg.jpg" alt="" />
                                        <div class="twitter-profile">
                                            <span><img src="images/resource/me.jpg" alt="" /></span>
                                            <h3>@NataliaQueenart<i title="Verified" class="fa fa-check blue" data-toggle="tooltip" data-placement="top"></i></h3>
                                            <h4>Creative Graphic Designer</h4>
                                        </div>
                                        <ul class="twitter-activity">
                                            <li><i>Followers</i><span>88,900</span>
                                            </li>
                                            <li><i>Following</i><span>2,090</span>
                                            </li>
                                            <li><i>Tweets</i><span>409</span>
                                            </li>
                                        </ul>
                                    </div>
                                    <!-- Twitter Widget -->
                                </div>
                            </div>

                            <div class="col-md-7">
                                <div class="widget-area no-padding blank">
                                    <div class="panel panel-default work-progress-table">
                                        <!-- Default panel contents -->
                                        <div class="panel-heading">Lanbrina Scholar<i>My Work Progress</i>
                                            <div class="btn-group">
                                                <button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">Default <span class="caret"></span>
                                                </button>
                                                <ul role="menu" class="dropdown-menu">
                                                    <li><a href="#">Action</a>
                                                    </li>
                                                    <li><a href="#">Another action</a>
                                                    </li>
                                                    <li><a href="#">Something else here</a>
                                                    </li>
                                                    <li class="divider"></li>
                                                    <li><a href="#">Separated link</a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                        <!-- Table -->
                                        <table class="table">
                                            <thead>
                                                <tr>
                                                    <th>#</th>
                                                    <th>Name</th>
                                                    <th>Progress</th>
                                                    <th>Status</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>1</td>
                                                    <td>Mark</td>
                                                    <td>
                                                        <div class="progress">
                                                            <div style="width: 60%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="60" role="progressbar" class="red progress-bar">
                                                                <span>60%</span>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td>Pending..</td>
                                                </tr>
                                                <tr>
                                                    <td>2</td>
                                                    <td>Jacob</td>
                                                    <td>
                                                        <div class="progress">
                                                            <div style="width: 80%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="80" role="progressbar" class="green progress-bar">
                                                                <span>80%</span>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td>Checking..</td>
                                                </tr>
                                                <tr>
                                                    <td>3</td>
                                                    <td>Larry</td>
                                                    <td>
                                                        <div class="progress">
                                                            <div style="width: 40%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="40" role="progressbar" class="blue progress-bar">
                                                                <span>40%</span>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td>Working...</td>
                                                </tr>
                                                <tr>
                                                    <td>4</td>
                                                    <td>John Doe</td>
                                                    <td>
                                                        <div class="progress">
                                                            <div style="width: 90%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="90" role="progressbar" class="gray progress-bar">
                                                                <span>90%</span>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td>Almost Done</td>
                                                </tr>
                                                <tr>
                                                    <td>5</td>
                                                    <td>Brandon Daril</td>
                                                    <td>
                                                        <div class="progress">
                                                            <div style="width: 60%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="60" role="progressbar" class="red progress-bar">
                                                                <span>60%</span>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td>Pending..</td>
                                                </tr>
                                                <tr>
                                                    <td>6</td>
                                                    <td>Nikil Bolin</td>
                                                    <td>
                                                        <div class="progress">
                                                            <div style="width: 20%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="20" role="progressbar" class="red progress-bar">
                                                                <span>20%</span>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td>Almost..</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                    <!-- Table Progress -->
                                </div>
                                <!-- Widget Area -->
                            </div>

                            <div class="col-md-12">
                                <div class="widget-area no-padding blank">
                                    <h2 class="widget-title"><strong>Server</strong> Loaded</h2>
                                    <div class="server-load-sec">
                                        <div class="widget">
                                            <div class="server-status">
                                                <div class="full-width">
                                                    <div class="server">
                                                        <span class="server1"><i></i> Server 1</span>
                                                        <span class="server2"><i></i> Server 2</span>
                                                        <div data-toggle="buttons" class="btn-group btn-group-sm">
                                                            <label class="btn btn-default active">
                                                                <input type="radio" checked="" name="options" />Server #1
                                                            </label>
                                                            <label class="btn btn-default">
                                                                <input type="radio" name="options" />Server #2
                                                            </label>
                                                        </div>
                                                    </div>
                                                    <div id="serverload-chart"></div>
                                                </div>
                                                <h3>System Status</h3>
                                                <div class="status-progress-sec">
                                                    <div class="row">
                                                        <div class="col-md-6">
                                                            <div class="status-progress">
                                                                <span>Data Bases (23/100)</span>
                                                                <div class="progress">
                                                                    <div style="width: 90%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="90" role="progressbar" class="progress-bar gray">
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <!-- Server Status progress -->
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="status-progress">
                                                                <span>Memory Usage 50%</span>
                                                                <div class="progress">
                                                                    <div style="width: 60%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="60" role="progressbar" class="progress-bar gray">
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <!-- Server Status progress -->
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="status-progress">
                                                                <span>Domains (2/10)</span>
                                                                <div class="progress">
                                                                    <div style="width: 40%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="40" role="progressbar" class="progress-bar gray">
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <!-- Server Status progress -->
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="status-progress">
                                                                <span>Disk Usage 80%</span>
                                                                <div class="progress">
                                                                    <div style="width: 75%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="75" role="progressbar" class="progress-bar gray">
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <!-- Server Status progress -->
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="status-progress">
                                                                <span>Email Accounts (56/100)</span>
                                                                <div class="progress">
                                                                    <div style="width: 25%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="25" role="progressbar" class="progress-bar gray">
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <!-- Server Status progress -->
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="status-progress">
                                                                <span>CPU Usage (34.05-23 cpus)</span>
                                                                <div class="progress">
                                                                    <div style="width: 95%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="95" role="progressbar" class="progress-bar gray">
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <!-- Server Status progress -->
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- Widget Area -->
                            </div>

                            <div class="col-md-6">
                                <div class="widget-area pattern">
                                    <div class="balance-widget">
                                        <span class="sparkpie" id="pie2">2,2,2</span>
                                        <h3>Our Income</h3>
                                        <h2><i>THIS MONTH EARNING</i>$9,34,145.0</h2>
                                        <div class="progress w-tooltip">
                                            <div class="blue progress-bar" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
                                                <span><i>Today</i>$2,230</span>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- Balance Widget -->
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="widget-area pattern">
                                    <div class="balance-widget">
                                        <span class="sparkpie" id="pie3">1,1,2,3,2</span>
                                        <h3>Our Earning</h3>
                                        <h2><i>THIS MONTH EARNING</i>$9,34,145.0</h2>
                                        <div class="progress w-tooltip">
                                            <div class="green progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">
                                                <span><i>Today</i>$2,230</span>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- Balance Widget -->
                                </div>
                            </div>

                            <div class="col-md-12">
                                <div class="widget-area blank">
                                    <div class="full-width">
                                        <h2 class="widget-title"><strong>Country</strong> Visitors</h2>
                                        <ul class="panel-function">
                                            <li class="dropdown">
                                                <a role="button" data-toggle="dropdown" href="#"> <b class="caret"></b>
                                                </a>
                                                <ul class="dropdown-menu" role="menu">
                                                    <li role="presentation"><a title="" class="hide-btn"><i class="fa fa-minus"></i></a>
                                                    </li>
                                                    <li role="presentation"><a title="" class="close-sec"><i class="fa fa-close"></i></a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                        <!-- Panel Function -->
                                        <div class="widget">
                                            <div class="row">
                                                <div class="col-md-8">
                                                    <div id="map" style="width: 100%; height: 300px" class="map-vector"></div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="visit-table">
                                                        <ul>
                                                            <li class="table-head">
                                                                <h2 class="location">Location</h2>
                                                                <h2 class="visit">Visits</h2>
                                                            </li>
                                                            <li><span class="location"><img src="images/resource/us-flag.jpg" alt="" />United States</span><i class="visit">2298</i>
                                                            </li>
                                                            <li><span class="location"><img src="images/resource/china-flag.jpg" alt="" />China</span><i class="visit">13244</i>
                                                            </li>
                                                            <li><span class="location"><img src="images/resource/turkey-flag.jpg" alt="" />Turkey</span><i class="visit">234</i>
                                                            </li>
                                                            <li><span class="location"><img src="images/resource/australia-flag.jpg" alt="" />Australia</span><i class="visit">2345</i>
                                                            </li>
                                                            <li><span class="location"><img src="images/resource/india-flag.jpg" alt="" />India</span><i class="visit">756</i>
                                                            </li>
                                                            <li><span class="location"><img src="images/resource/brazil-flag.jpg" alt="" />Brazil</span><i class="visit">65570</i>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <!-- Content Sec -->
            <div class="slide-panel" id="panel-scroll">
                <ul role="tablist" class="nav nav-tabs panel-tab-btn">
                    <li class="active"><a data-toggle="tab" role="tab" href="#tab1"><i class="fa fa-inbox"></i><span>Your Emails</span></a>
                    </li>
                    <li><a data-toggle="tab" role="tab" href="#tab2"><i class="fa fa-wrench"></i><span>Your Setting</span></a>
                    </li>
                </ul>
                <div class="tab-content panel-tab">
                    <div id="tab1" class="tab-pane fade in active">
                        <div class="recent-mails-widget">
                            <form>
                                <div id="searchMail"></div>
                            </form>
                            <h3>Recent Emails</h3>
                            <ul id="mail-list" class="mail-list">
                                <li>
                                    <div class="title">
                                        <span><img src="images/resource/sender1.jpg" alt="" /><i class="online"></i></span>
                                        <h3><a href="#" title="">Kim Hostwood</a><span>5 min ago</span></h3>
                                        <a href="#" data-toggle="tooltip" data-placement="left" title="Attachment"><i class="fa fa-paperclip"></i></a>
                                    </div>
                                    <h4>Themeforest Admin Template</h4>
                                    <p>This product is so good that i manage to buy it 1 for me and 3 for my families.</p>
                                </li>
                                <li>
                                    <div class="title">
                                        <span><img src="images/resource/sender2.jpg" alt="" /><i class="online"></i></span>
                                        <h3><a href="#" title="">John Doe</a><span>2 hours ago</span></h3>
                                        <a href="#" data-toggle="tooltip" data-placement="left" title="Attachment"><i class="fa fa-paperclip"></i></a>
                                    </div>
                                    <h4>Themeforest Admin Template</h4>
                                    <p>This product is so good that i manage to buy it 1 for me and 3 for my families.</p>
                                </li>
                                <li>
                                    <div class="title">
                                        <span><img src="images/resource/sender3.jpg" alt="" /><i class="offline"></i></span>
                                        <h3><a href="#" title="">Jonathan Doe</a><span>8 min ago</span></h3>
                                        <a href="#" data-toggle="tooltip" data-placement="left" title="Attachment"><i class="fa fa-paperclip"></i></a>
                                    </div>
                                    <h4>Themeforest Admin Template</h4>
                                    <p>This product is so good that i manage to buy it 1 for me and 3 for my families.</p>
                                </li>
                            </ul>
                            <a href="inbox.html" title="" class="red">View All Messages</a>
                        </div>
                        <!-- Recent Email Widget -->

                        <div class="file-transfer-widget">
                            <h3>FILE TRANSFER <i class="fa fa-angle-down"></i></h3>
                            <div class="toggle">
                                <ul>
                                    <li>
                                        <i class="fa fa-file-excel-o"></i>
                                        <h4>my-excel.xls<i>20 min ago</i></h4>
                                        <div class="progress">
                                            <div style="width: 90%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="90" role="progressbar" class="progress-bar red">
                                                90%
                                            </div>
                                        </div>
                                        <div class="file-action-btn">
                                            <a href="#" title="Approve" class="green" data-toggle="tooltip" data-placement="bottom"><i class="fa fa-check"></i></a>
                                            <a href="#" title="Cancel" class="red" data-toggle="tooltip" data-placement="bottom"><i class="fa fa-close"></i></a>
                                        </div>
                                    </li>
                                    <li>
                                        <i class="fa fa-file-pdf-o"></i>
                                        <h4>my-cv.pdf<i>8 min ago</i></h4>
                                        <div class="progress">
                                            <div style="width: 40%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="40" role="progressbar" class="progress-bar blue">
                                                40%
                                            </div>
                                        </div>
                                        <div class="file-action-btn">
                                            <a href="#" title="Approve" class="green" data-toggle="tooltip" data-placement="bottom"><i class="fa fa-check"></i></a>
                                            <a href="#" title="Cancel" class="red" data-toggle="tooltip" data-placement="bottom"><i class="fa fa-close"></i></a>
                                        </div>
                                    </li>
                                    <li>
                                        <i class="fa fa-file-video-o"></i>
                                        <h4>portfolio-shoot.mp4<i>12 min ago</i></h4>
                                        <div class="progress">
                                            <div style="width: 70%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="70" role="progressbar" class="progress-bar green">
                                                70%
                                            </div>
                                        </div>
                                        <div class="file-action-btn">
                                            <a href="#" title="Approve" class="green" data-toggle="tooltip" data-placement="bottom"><i class="fa fa-check"></i></a>
                                            <a href="#" title="Cancel" class="red" data-toggle="tooltip" data-placement="bottom"><i class="fa fa-close"></i></a>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <!-- File Transfer -->
                    </div>
                    <div id="tab2" class="tab-pane fade">
                        <div class="setting-widget">
                            <form>
                                <h3>Accounts</h3>
                                <div class="toggle-setting">
                                    <span>Office Account</span>
                                    <label class="toggle-switch">
                                        <input type="checkbox">
                                        <span data-unchecked="Off" data-checked="On"></span>
                                    </label>
                                </div>
                                <div class="toggle-setting">
                                    <span>Personal Account</span>
                                    <label class="toggle-switch">
                                        <input type="checkbox" checked>
                                        <span data-unchecked="Off" data-checked="On"></span>
                                    </label>
                                </div>
                                <div class="toggle-setting">
                                    <span>Business Account</span>
                                    <label class="toggle-switch">
                                        <input type="checkbox">
                                        <span data-unchecked="Off" data-checked="On"></span>
                                    </label>
                                </div>
                            </form>

                            <form>
                                <h3>General Setting</h3>
                                <div class="toggle-setting">
                                    <span>Notifications</span>
                                    <label class="toggle-switch">
                                        <input type="checkbox" checked>
                                        <span data-unchecked="Off" data-checked="On"></span>
                                    </label>
                                </div>
                                <div class="toggle-setting">
                                    <span>Notification Sound</span>
                                    <label class="toggle-switch">
                                        <input type="checkbox" checked>
                                        <span data-unchecked="Off" data-checked="On"></span>
                                    </label>
                                </div>
                                <div class="toggle-setting">
                                    <span>My Profile</span>
                                    <label class="toggle-switch">
                                        <input type="checkbox">
                                        <span data-unchecked="Off" data-checked="On"></span>
                                    </label>
                                </div>
                                <div class="toggle-setting">
                                    <span>Show Online</span>
                                    <label class="toggle-switch">
                                        <input type="checkbox">
                                        <span data-unchecked="Off" data-checked="On"></span>
                                    </label>
                                </div>
                                <div class="toggle-setting">
                                    <span>Public Profile</span>
                                    <label class="toggle-switch">
                                        <input type="checkbox" checked>
                                        <span data-unchecked="Off" data-checked="On"></span>
                                    </label>
                                </div>
                            </form>
                        </div>
                        <!-- Setting Widget -->
                    </div>
                </div>
            </div>
            <!-- Slide Panel -->
        </div>
        <!-- Page Container -->
    </div>
    <!-- main -->


    <!-- Script -->
    <script type="text/javascript" src="js/modernizr.js"></script>
    <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
    <script type="text/javascript" src="js/script.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <script type="text/javascript" src="js/enscroll.js"></script>
    <script type="text/javascript" src="js/chart.js"></script>
    <script type="text/javascript" src="js/extra.js"></script>
    <script type="text/javascript" src="js/daterangepicker.js"></script>
    <script type="text/javascript" src="js/moment.js"></script>
    <script type="text/javascript" src="js/jquery-jvectormap.js"></script>
    <script type="text/javascript" src="js/jquery-jvectormap-world-en.js"></script>
    <script type="text/javascript" src="js/gdp-data.js"></script>
    <script type="text/javascript" src="js/raphael-min.js"></script>
    <script type="text/javascript" src="js/d3.v2.js"></script>
    <script type="text/javascript" src="js/rickshaw.min.js"></script>
    <script type="text/javascript" src="js/html5lightbox.js"></script>
    <script type="text/javascript" src="js/grid-filter.js"></script>
    <script type="text/javascript" src="js/jquery.sparkline.min.js"></script>
    <script type="text/javascript" src="js/snap.svg.js"></script>
    <script type="text/javascript">
        function random_num(field, interval, range) {

            setInterval(function() {
                var chars = "0123456789";
                var string_length = range;
                var randomstring = '';
                for (var i = 0; i < string_length; i++) {
                    var rnum = Math.floor(Math.random() * chars.length);
                    randomstring += chars.substring(rnum, rnum + 1);
                }
                var a = jQuery("#" + field).html(randomstring);
                console.log(a);
            }, interval);
        };
    </script>
    <script>
        jQuery(document).ready(function() {
            random_num('random', 3000, 3);
        });
    </script>
    <script>
        var programmingSkills = [{
            value: 20,
            label: 'Chrome',
            color: '#8faeff'
        }, {
            value: 23,
            label: 'Firefox',
            color: '#9999ff'
        }, {
            value: 17,
            label: 'Opera',
            color: '#c4a7ff'
        }, {
            value: 22,
            label: 'Safari',
            color: '#c799ff'
        }, {
            value: 18,
            label: 'IE',
            color: '#9bc8ff'
        }, ];
    </script>
    <script type="text/javascript" src="js/svg-donut-chart-framework.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            var graph;

            var seriesData = [
                [],
                []
            ];
            var random = new Rickshaw.Fixtures.RandomData(50);

            for (var i = 0; i < 50; i++) {
                random.addData(seriesData);
            }

            graph = new Rickshaw.Graph({
                element: document.querySelector("#serverload-chart"),
                height: 198,
                renderer: 'area',
                series: [{
                    data: seriesData[0],
                    color: '#b3b3b3',
                    name: 'File Server'
                }, {
                    data: seriesData[1],
                    color: '#505050',
                    name: 'Mail Server'
                }]
            });

            var hoverDetail = new Rickshaw.Graph.HoverDetail({
                graph: graph,
            });

            setInterval(function() {
                random.removeData(seriesData);
                random.addData(seriesData);
                graph.update();

            }, 1000);


            $('#reportrange').daterangepicker({
                    startDate: moment().subtract('days', 29),
                    endDate: moment(),
                    minDate: '01/01/2012',
                    maxDate: '12/31/2014',
                    dateLimit: {
                        days: 60
                    },
                    showDropdowns: true,
                    showWeekNumbers: true,
                    timePicker: false,
                    timePickerIncrement: 1,
                    timePicker12Hour: true,
                    ranges: {
                        'Today': [moment(), moment()],
                        'Yesterday': [moment().subtract('days', 1), moment().subtract('days', 1)],
                        'Last 7 Days': [moment().subtract('days', 6), moment()],
                        'Last 30 Days': [moment().subtract('days', 29), moment()],
                        'This Month': [moment().startOf('month'), moment().endOf('month')],
                        'Last Month': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
                    },
                    opens: 'left',
                    buttonClasses: ['btn btn-default'],
                    applyClass: 'btn-small btn-primary',
                    cancelClass: 'btn-small',
                    format: 'MM/DD/YYYY',
                    separator: ' to ',
                    locale: {
                        applyLabel: 'Submit',
                        fromLabel: 'From',
                        toLabel: 'To',
                        customRangeLabel: 'Custom Range',
                        daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
                        monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
                        firstDay: 1
                    }
                },
                function(start, end) {
                    console.log("Callback has been called!");
                    $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
                }
            );
            //Set the initial state of the picker label
            $('#reportrange span').html(moment().subtract('days', 29).format('MMMM D, YYYY') + ' - ' + moment().format('MMMM D, YYYY'));

            $(function() {
                $('#map').vectorMap({
                    map: 'world_en'
                });
            })

            $("#pie2").sparkline([2, 2, 2], {
                type: 'pie',
                width: '40',
                height: '40',
                sliceColors: ['#2dcb73', '#fd6a59', '#17c3e5', '#109618', '#66aa00', '#dd4477', '#0099c6', '#990099 ']
            });

            $("#pie3").sparkline([1, 1, 2, 3, 2], {
                type: 'pie',
                width: '40',
                height: '40',
                sliceColors: ['#2dcb73', '#fd6a59', '#17c3e5', '#109618', '#66aa00', '#dd4477', '#0099c6', '#990099 ']
            });

        });
    </script>
</body>

</html>